<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- <%@ page session="false" %> --%>
<%-- <% --%>
<!--      response.sendRedirect("calculator.jsf"); -->
<%-- %> --%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=request.getContextPath()+"/" %>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Shining Yao" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>测试</title>
<link href="css/yaml/core/base.css" rel="stylesheet" media="screen" />
<link href="css/yaml/screen/typography.css" rel="stylesheet" media="screen" />
<link href="css/yaml/navigation/hlist.css" rel="stylesheet" media="screen" />
<link href="css/yaml/forms/gray-theme.css" rel="stylesheet" media="screen" />
<link href="css/yaml/add-ons/accessible-tabs/tabs.css" rel="stylesheet" media="screen" />
<!-- [if lte IE 7]>
	<link href="css/yaml/core/iehacks.min.css" rel="stylesheet" type="text/css" />
<![endif] -->
<script type="text/javascript" src="script/jquery/jquery-1.10.0.js"></script>
<script type="text/javascript" src="script/jquery/jquery.json-2.4.js"></script>
<script type="text/javascript" src="css/yaml/add-ons/accessible-tabs/jquery.tabs.js"></script>
<script type="text/javascript" src="script/template/handlebars.js"></script>
<script type="text/javascript" src="script/util/underscore.js"></script>
<!-- [if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
<script id="myTemplate" type="text/template">
	<div>
		{{name}}
	</div>
</script>
<script type="text/javascript">
<!--
$(function(){
	$('.jquery_tabs').accessibleTabs();
	if(!("placeholder" in document.createElement("input"))){
		$.getScript("script/jquery/jquery.placeholder.1.3.js",function(){
			$.Placeholder.init();
		});
	}
	
	/** An simple example of using template in underscore.js **/
// 	_.templateSettings = {
// 	    interpolate : /\{\{(.+?)\}\}/g  //change Underscore's template settings to use different symbols '{{}}' to set off interpolated code
// 	};
// 	var template = _.template($("#myTemplate").html());
// 	var html = template({name:"姚世宁"});
// 	alert(html);
	
	/** An simple example of using handlebars.js **/
// 	var source = $("#myTemplate").html();
// 	var template    = Handlebars.compile(source);
// 	var context = {name:"姚世宁"};
// 	var html = template(context);
// 	alert(html);

	$("#searchForm").on("submit",function(){
		var reqData = new Object();
		var word = new Object();
		word.spelling = $("#spelling").val();
		var simpleMeans = new Object();
		var meanItems = new Array();
		for(var i=0;i<5;i++) {
			var item = new Object();
			item.partsOfSpeechs = ["n","adj"];
			item.meaning = "书；卷；课本；账簿";
			meanItems.push(item);
		}
		simpleMeans.meanItem = meanItems;
		word.simpleMeans = simpleMeans;
		reqData.word = word;
		$.ajax({
			url : "word/create",
			type : "POST",
			dataType: "json",
			contentType : "application/json",
			data : $.toJSON(reqData),
			success : function(data) {
				alert($.toJSON(data));
			}
		});
		return false;
	});
});
//-->
</script>
<style>
<!--
body {
	font-size: 14px;
	font-family: arial,"宋体";
	background: -ms-radial-gradient(center, purple, black);
	background: -moz-radial-gradient(center, purple, black);
	background: -webkit-radial-gradient(center, purple, black);
	background-color: rgb(100,100,100);
}
.dict-source,.dict-target {
	margin: 0px 0px 6px 0px;
}
#example-content li {
	margin-bottom: 25px;
	font-size: 14px;
}
#wraper {
	font-family: "微软雅黑";
}
input:-webkit-input-placeholder,input:-moz-placeholder,input:-ms-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;
}
input:-ms-input-placeholder {
  color: #999;
}
-->
</style>
</head>
<body>
	<div id="container" style="width: 1000px;margin: 0px auto;">
		<div id="header">
			<div id="logo">
				<img alt="" src="images/logo.png">
			</div>
			<div id="searchBar">
				<form id="searchForm">
					<input id="spelling" class="box" style="padding: 8px;width: 536px;font-size: 16px;margin-top: 0px;" maxlength="100" placeholder="请输入要查询的单词" />
					<!-- <button id="createWord" class="ym-button" style="height: 32px;letter-spacing: 5px;">创建</button> -->
					<input class="ym-button" type="submit" style="height: 32px;letter-spacing: 5px;margin-top: 0px;" value="创建" />
				</form>
			</div>
		</div>
		<div id="wraper" class="box info" style="height: 1000px;width: 830px;padding-top: 0px;">
			<div class="title">
				<div id="pronounce">
					<h2>
						<strong style="font-size: 25px;margin-right: 20px;">book</strong>
						<span style="font-size: 13px;font-family: 'lucida sans unicode',arial;color: green;">[英][bʊk]</span>
						<span style="font-size: 13px;font-family: 'lucida sans unicode',arial;color: green;">[美][bʊk]</span>
					</h2>
				</div>
			</div>
			<div class="jquery_tabs">
		    	<h4>简明释义</h4>
			    <div class="tabbody" style="margin-top: 22px;">
			    	<p style="margin: 0px 0px 6px 0px;">n.书；卷；课本；账簿</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.& vi.预订</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.登记；（向旅馆、饭店、戏院等）预约；立案（控告某人）；订立演出契约</p>
			    	<p style="margin: 0px 0px 6px 0px;">adj.书的；账簿上的；得之（或来自）书本的；按照（或依据）书本的</p>
			    </div>
			</div>
			<div class="jquery_tabs">
		    	<h4>柯林斯高阶英汉词典</h4>
			    <div class="tabbody" style="margin-top: 22px;">
			    	<p style="margin: 0px 0px 6px 0px;">n.书；卷；课本；账簿</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.& vi.预订</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.登记；（向旅馆、饭店、戏院等）预约；立案（控告某人）；订立演出契约</p>
			    	<p style="margin: 0px 0px 6px 0px;">adj.书的；账簿上的；得之（或来自）书本的；按照（或依据）书本的</p>
			    </div>
			    <h4>百科释义</h4>
			    <div class="tabbody" style="margin-top: 22px;">
			    	<p style="margin: 0px 0px 6px 0px;">n.书；卷；课本；账簿</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.& vi.预订</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.登记；（向旅馆、饭店、戏院等）预约；立案（控告某人）；订立演出契约</p>
			    	<p style="margin: 0px 0px 6px 0px;">adj.书的；账簿上的；得之（或来自）书本的；按照（或依据）书本的</p>
			    </div>
			    <h4>短语词组</h4>
			    <div class="tabbody" style="margin-top: 22px;">
			    	<p style="margin: 0px 0px 6px 0px;">n.书；卷；课本；账簿</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.& vi.预订</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.登记；（向旅馆、饭店、戏院等）预约；立案（控告某人）；订立演出契约</p>
			    	<p style="margin: 0px 0px 6px 0px;">adj.书的；账簿上的；得之（或来自）书本的；按照（或依据）书本的</p>
			    </div>
			    <h4>同反义词</h4>
			    <div class="tabbody" style="margin-top: 22px;">
			    	<p style="margin: 0px 0px 6px 0px;">n.书；卷；课本；账簿</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.& vi.预订</p>
			    	<p style="margin: 0px 0px 6px 0px;">vt.登记；（向旅馆、饭店、戏院等）预约；立案（控告某人）；订立演出契约</p>
			    	<p style="margin: 0px 0px 6px 0px;">adj.书的；账簿上的；得之（或来自）书本的；按照（或依据）书本的</p>
			    </div>
			</div>
			<div class="jquery_tabs">
		    	<h4>例句</h4>
			    <div id="example-content" class="tabbody" style="margin-top: 22px;">
			    	<ol >
			    		<li>
			    			<p class="dict-source">You read the book.</p>
			    			<p class="dict-target">你读读这本书。</p>
			    		</li>
			    		<li>
			    			<p class="dict-source">Cannot open the phone book file.</p>
			    			<p class="dict-target">无法打开电话簿文件。</p>
			    		</li>
			    		<li>
			    			<p class="dict-source">Time alone with a good book.</p>
			    			<p class="dict-target">一个人静静地看一本好书。</p>
			    		</li>
			    		<li>
			    			<p class="dict-source">An ebook is a book in electronic format.</p>
			    			<p class="dict-target">电子书就是电子格式的书籍。</p>
			    		</li>
			    		<li>
			    			<p class="dict-source">The book deals with asian problems.</p>
			    			<p class="dict-target">这书本论述了亚洲问题。</p>
			    		</li>
			    	</ol>
			    </div>
			</div>
		</div>
	</div>
</body>
</html>